<!--
 * @Author: ChunLai
 * @Date: 2023-07-25 09:48:14
 * @LastEditTime: 2025-08-06 14:02:46
 * @Description: 订单支付
 * @FilePath: \02.bldinsure\src\views\pay\index.vue
-->
<template>
  <div class="payment_page">
    <!-- 状态显示 -->
    <InsureStatus class="mb10" ref="insureFlagRef" />
    <RiskPlanModule />
    <div class="mode2 mt10">
      <div class="flex-lr mode2_top">
        <span class="mode2_tt">支付信息</span>
        <span
          class="mode2_btn"
          @click="$router.push('/replace')"
          v-if="!dontRepalceBank.includes(this.bankCardInfo.payMode)"
        >
          修改信息
          <img :src="`${imgUrlPath}/icons/edit.png`" class="ml4 w15" />
        </span>
      </div>
      <div class="li_cell">
        <div class="cell_label">持卡人</div>
        <div class="cell_value">{{ bankCardInfo.bankAccName }}</div>
      </div>
      <div class="li_cell">
        <div class="cell_label">缴费方式</div>
        <div class="cell_value">{{ payModeLabel }}</div>
      </div>
      <div class="li_cell">
        <div class="cell_label">缴费银行</div>
        <div class="cell_value">{{ bankCardInfo.bankName }}</div>
      </div>
      <div class="li_cell">
        <div class="cell_label">银行卡号</div>
        <div class="cell_value">{{ bankCardInfo.bankAccNo }}</div>
      </div>
      <div class="li_cell set_fx1" v-if="bankCardInfo.firBankMobile">
        <div class="cell_label">预留手机号码</div>
        <div class="cell_value">{{ bankCardInfo.firBankMobile }}</div>
      </div>
    </div>
    <div class="warn_tip">
      1、点击支付时，确保您提交的银行卡片中有充足的金额满足保费的扣取；<br />2、假设扣费失败或者银行卡出现问题，可重新更换银行卡进行保费支付交易。
    </div>
    <SmsCodeInput ref="smsCodeRef" @handleCheck="payAuthSureApi" />
    <!-- <FooterBtns
      btnNum="2"
      :leftText="signText"
      @saveField="goSignBank"
      :rightText="payText"
      @saveForm="goPayInsure"
    ></FooterBtns> -->
    <FooterBtns
      btnNum="1"
      :rightText="payText"
      @saveForm="goPayInsure"
    ></FooterBtns>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import RiskPlanModule from "@/components/RiskPlanModule";
import InsureStatus from "../sign/components/InsureStatus";
import SmsCodeInput from "./components/SmsCodeInput";
import { payment } from "@/utils/functions.js";
import { bankCardSignHandleMixin } from "./banksign.js";
import { rebackUrlPath } from "@/methods/format.js";

export default {
  name: "PaymentPage",
  data() {
    return {
      payFlag: "",
    };
  },
  components: { RiskPlanModule, InsureStatus, SmsCodeInput },
  computed: {
    ...mapGetters({
      bankCardInfo: "insert/payInfo",
      payModeList: "dictionary/payModeList",
      dontRepalceBank: "page/dontRepalceBank",
    }),
    payModeLabel() {
      let res = "";
      if (this.bankCardInfo.payMode !== void 0) {
        const obj = this.payModeList.find(
          (ele) => ele.value == this.bankCardInfo.payMode
        );
        if (obj) {
          res = obj.label;
        }
      }
      return res;
    },
    payText() {
      let res = "签约查询";
      if (this.signFlag == "1") {
        res = "签约申请";
      } else if (this.signFlag == "2") {
        res = "签约确认";
      } else if (this.signFlag == "4") {
        res = "去解约";
      } else if (this.signFlag == "5") {
        res = "解约确认";
      } else if (this.signFlag == "3") {
        res = "去支付";
        if (["1", "2", "3", "4"].includes(this.payFlag)) {
          res = "下一步";
        } else if (["0"].includes(this.payFlag)) {
          res = "去支付";
        }
      }
      if (this.compEngName == "fuxing") {
        if (this.bankCardInfo.payMode == "7") {
          res = "批量支付签约";
        } else {
          res = "去支付";
        }
      }
      return res;
    },
  },
  mixins: [bankCardSignHandleMixin],
   created() {
    this.signBeforeQuery("init");
  },
  mounted() {},
  methods: {
    goPayInsure() {
      if (this.compEngName == "fuxing") {
        // 实时不需要签约
        if (this.bankCardInfo.payMode == "R") {
          this.payBeforeApi();
          return;
        }
      }
      if (this.signFlag == "3") {
        if (["1", "2", "3", "4"].includes(this.payFlag)) {
          return this.$router.push("/billres");
        }
        this.payBeforeApi();
      } else {
        if (["0", "6", "-1"].includes(this.signFlag)) {
          this.signBeforeQuery();
        } else {
          this.signCodeHandle(this.signFlag);
        }
      }
    },
    goSignBank() {
      if (["0", "6", "-1", "3"].includes(this.signFlag)) {
        this.signBeforeQuery();
      } else {
        this.signCodeHandle(this.signFlag);
      }
    },
    toPayPaiHandle() {
      this.payBeforeApi();
    },
    payBeforeApi() {
      this.$baseConfirm(
        "在您点击支付后，保险公司会发起扣款，是否确认？",
        () => {
          this.paymentApi();
        }
      );
    },
    paymentApi() {
      let rePath = `#/pay`;
      let params = {
        ...this.apiComParams,
        successUrl: `${rebackUrlPath("#/billres")}`,
        failUrl: `${rebackUrlPath(rePath)}`,
      };
      this.$store.commit("updateLoad", true);
      payment(params).then(
        ({ data }) => {
          this.$store.commit("updateLoad", false);
          // 跳转第三方平台支付
          if (data.code == "5" && data.payUrl) {
            window.location.href = data.payUrl;
            return;
          }
          this.payFlag = data.code;
          this.$refs.insureFlagRef.initModule(); // 初始化保单状态提示
          this.$baseAlert(data.msg, () => {
            if (["1", "2", "3", "4"].includes(data.code)) {
              this.$router.push("/billres");
            }
          });
        },
        (err) => {
          this.$store.commit("updateLoad", false);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.payment_page {
  padding-top: 10px;
  padding-bottom: 100px;
}

.mode2 {
  padding: 0 12px;
  background-color: #fff;

  .mode2_top {
    height: 40px;

    .mode2_tt {
      font-size: 16px;
      font-weight: 600;
      color: #242424;
      font-family: MiSans;
    }

    .mode2_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 26px;
      color: #ffffff;
      border-radius: 26px;
      background: linear-gradient(90deg, #ff7d45 0%, #ffc07d 100%);
    }
  }
}

.warn_tip {
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: #747474;
}
</style>
